<template>
	<view>
		<view class="course-item" v-for="(course, index) in courseList" :key="course.id">
			<text class="item-title">{{ course.name }}</text>
			<rich-text :nodes="course.desc" class="item-desc"></rich-text>
			<image :src="course.cover" mode="widthFix" class="item-cover"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				courseList: []
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			getData() {
				uni.request({
					url: 'https://24c2021d-05c9-4a6d-94b7-b9097f36e264.mock.pstmn.io',
					success: (res) => {
						if (res.data) {
							// console.log(res.data.data)
							this.courseList = res.data.data
						}
					}
				})
			}
		}
	}
</script>

<style>
	.course-item {
		padding: 20rpx;
		margin-bottom: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.item-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 16rpx;
	}

	.item-desc {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
		margin-bottom: 20rpx;
	}

	.item-cover {
		width: 100%;
		height: 400rpx;
		border-radius: 8rpx;
		margin-top: 10rpx;
	}
</style>